<!DOCTYPE html>
<html lang="en">

<head>
	<title>用户管理页</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
	<link rel="stylesheet" href="css/uniform.css" />
	<link rel="stylesheet" href="css/select2.css" />
	<link rel="stylesheet" href="css/matrix-style2.css" />
	<link rel="stylesheet" href="css/matrix-media.css" />
	<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
</head>

<body>

	<div id="content">
		<div id="content-header">
			<h1>用户信息管理</h1>
		</div>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
					<div class="widget-box">
						<div class="widget-title"> <span class="icon"> <i class="icon-info-sign"></i> </span>
							<h5>添加新用户</h5>
						</div>
						<div class="widget-content nopadding">
							<form class="form-horizontal" method="post" action="#" name="basic_validate"
								id="basic_validate" novalidate="novalidate">
								<div class="control-group">
									<label class="control-label">用户名</label>
									<div class="controls">
										<input type="text" name="required" id="required">
										<span id="inf"></span>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label">邮箱</label>
									<div class="controls">
										<input type="text" autocomplete="off" name="email" id="email">
									</div>
								</div>
								<div class="control-group">
									<label class="control-label">密码</label>
									<div class="controls">
										<input type="text" autocomplete="off" name="date" id="date">
									</div>
								</div>
								<div class="form-actions">
									<input type="submit" autocomplete="off" value="保存" class="btn btn-success"
										id="btn-success">
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
	<script src="js/jquery.ui.custom.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.uniform.js"></script>
	<script src="js/select2.min.js"></script>
	<script src="js/jquery.dataTables.min.js"></script>
	<script src="js/matrix.js"></script>
	<script src="js/matrix.tables.js"></script>
</body>
<script src="js/myquery.js"></script>
<script>
	(function () {
		let btnsuccess = document.querySelector('#btn-success');//保存按钮
		let required = document.querySelector('#required');//用户名
		let psw = document.querySelector('#date');//密码
		let email = document.querySelector('#email');//邮箱
		let inf = document.querySelector('#inf');

		let isok = false;
		//1.验证用户名是否存在：select
		required.onblur = () => {
			let val = required.value.trim();
			
			if (val) {//想要后端帮忙查询用户名是否存在
				ajax({
					type: 'get',
					url: 'api/checkname.php',
					data: {
						username: val
					},
					success: str => {
						// console.log(str);
						if (str == 'no') {
							//不可以注册
							inf.innerHTML = '该用户太受欢迎啦，请换一个';
							inf.style.color = 'red';
							isok = false;
						} else {
							//可以注册
							inf.innerHTML = '验证通过';
							inf.style.color = '#58bc58';
							isok = true;
						}
					}
				});
			} else {
				inf.innerHTML = '请输入用户名';
				inf.style.color = 'red';
			}
		}

		//添加新用户信息
		btnsuccess.onclick = () => {
			if (isok) {//验证通过才能注册
				console.log(isok);
				let username = required.value.trim();
				let password = psw.value.trim();
				let email1 = email.value.trim();
				//console.log(email1);
				if (username && password && email1) {
					
					ajax({
						type: 'post',
						url: 'api/reg.php',
						data: {
							username: username,
							password: password,
							email: email1
						},
						success: str => {
							//console.log(str);
							if (str == '1') {
								 alert('注册失败');
							} else {						
								alert('注册成功');
							}
						}
					})
				} else {
					inf.innerHTML = '请输入正确的信息';
					inf.style.color = 'red';
				}
			}
		}
	})();
</script>

</html>